<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<script>
	$(document).ready(function() {
		//聚焦第一个输入框
		$("#name").focus();
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules : {
				"department.id" : "required",
				mName : "required",
				saleUser : "required",
				shop : "required",
				salePrice : "required"
			}
		});
	});
</script>
<style>
.salebox {
	text-align: center;
}

#salebox {
	margin: auto;
	width: 90%;
	margin-bottom: 20px;
}

#salebox th {
	text-align: right;
}

#searchBox {
	margin: 15px auto;
}
</style>
<form id="inputForm" class="well form-inline" action="${ctx}/adoms/shopSalesRecord/sale" method="post">
	<input type="hidden" name="id" value="${shopSalesRecord.id}" />
	<table class="table table-striped table-bordered table-condensed">
		<tr>
			<th align="center">
				<h4>${USER.department.name}奶粉销售控制台</h4>
			</th>
		</tr>
		<tr>
			<td align="center" class="salebox well">
				<div id="searchBox">
					<i class="icon-qrcode"></i>
					商品二维码:
					<input id="qrCode" class="input-medium search-query span4" name="qrCode" type="text" maxlength="80" />
					<button class="btn btn-info" id="query" type="button">查询</button>
					<input class="btn" type="reset" value="清空数据" />
				</div>
				<table class="table table-condensed table-bordered table-condensed" id="salebox">
					<tr>
						<th class="span2" valign="top">商品详情:</th>
						<td colspan="3" id="gdetail">
							<span class="tBlue">请录入商品二维码进行查询</span>
						</td>
					</tr>
					<tr>
						<th>商品名称:</th>
						<td colspan="3">
							<input id="mName" name="mName" maxlength="200" type="text" />
							<input id="goodsId" name="goods.id" type="hidden" size="30" maxlength="80" />
						</td>
					</tr>
					<tr>
						<th>所属部门:</th>
						<td>
							<select name="department.id">
								<option value="${USER.department.id }">${USER.department.name }</option>
							</select>
						</td>
						<th>销售金额:</th>
						<td>
							<input id="mPrice" name="salePrice" type="text" class="span2" maxlength="80" />
							元
						</td>
					</tr>
					<tr>
						<th>销售店名:</th>
						<td>
							<input id="shop" name="shop" type="text" value="${USER.department.name}" size="30" maxlength="80" />
						</td>
						<th>销售员:</th>
						<td>
							<input id="saleUser" name="saleUser" type="text" value="${USER.name}" size="30" maxlength="80" />
						</td>
					</tr>
					<tr>
						<th valign="top">备注:</th>
						<td colspan="3">
							<textarea id="memo" name="memo" rows="4" class="span6"></textarea>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td align="center">
				<input class="btn btn-primary span2" type="submit" value="提 交" />
			</td>
		</tr>
	</table>
</form>
<script>
	$(function() {
		$("#query").click(function() {
			$.post("${ctx}/adoms/goods/goodsDetail", {
				qr : function() {
					return $("#qrCode").val();
				}
			}, function(data) {
				$("#gdetail").html(data);
				if ($("[name=goodsId]").val() > 0) {
					$("#mName").val($("[name=mName]").val());
					$("#mPrice").val($("[name=mPrice]").val());
					$("#goodsId").val($("[name=goodsId]").val());
				} else {
					if ($("[name=boxId]").val() > 0) {
						$("#gdetail").html("<span class='tRed'>请扫描单个商品的听（盒）码！</span>");
					} else {
						$("#gdetail").html("<span class='tRed'>尚未查询到任何数据，请检查所录入的二维码是否正确！(或该商品已售)</span>");
					}
				}
			}, 'html');
		});
		$("input:reset").click(function() {
			$("#gdetail").html("<span class='tBlue'>请录入商品二维码进行查询</span>");
		});
		$("#qrCode").keypress(function(e) {
			if (e.keyCode == 13) {
				$("#query").click();
				return false;
			}
		});
	});
</script>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
	</script>
</c:if>
